<script lang="ts" setup>
	const props = defineProps({
		starNum: {
			type: Number,
			default: 0,
		}
	});
</script>

<template>
	<span class="stars-wrapper">
		<span :class="['iconfont icon-star', {active: props.starNum >= 1}]"></span>
		<span :class="['iconfont icon-star', {active: props.starNum >= 2}]"></span>
		<span :class="['iconfont icon-star', {active: props.starNum >= 3}]"></span>
		<span :class="['iconfont icon-star', {active: props.starNum >= 4}]"></span>
		<span :class="['iconfont icon-star', {active: props.starNum >= 5}]"></span>
	</span>
</template>

<style lang="scss" scoped>
	@import '../../../assets/styles/variables.scss';

	.stars-wrapper {
		color: #ccc;

		.active {
			color: $starColor;
		}
	}
</style>